<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <title>Purplerize Framework Beta.</title>		

    <script type="text/javascript" src="js/jquery.js"></script> 
    <script type="text/javascript" src="js/purplerize.js"></script>

    <link rel="stylesheet" type="text/css" 
          href="font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="css/purplerize.css" />		

  </head>

  <body>	
    <div class='box c'>

      <h1>Purplerize Web Framework</h1>

      <h2>Organization</h2>

      <h3>Boxes, rows and cols</h3>

      <div class='box blue l3 c'>
        <div class='row'>Blue box</div>
        <div class='row yellow l4'>

          <div class='col w10 green d3 m10'>This is a col inside a yellow row</div>
          <div class='col w9 black white-t m10'>Another col with color text</div>
        </div>

        <div class='row yellow l4'>Another row</div>

        <div class='row yellow l4'>
          <div class='col w5 o3 green d3'>Look the offset</div>
        </div>
      </div>	

      <h2>Alignment</h2>
      <h3>Center, left and right</h3>

      <div class='box blue l3 c'>
        <div class='row green d3 c'> Row center</div>
        <div class='row green d3 l'>Row left</div>
        <div class='row green d3 r'>Row right</div>
      </div>	

      <h2>Menu</h2>
      <br />
      <h3>Click in items with arrows to see submenus</h3>
      <br />
      <div class='box'>
        <nav class='menu'>
          <a href="#">Home</a>
          <a href="#">Office</a>
          <a href="#">Market</a>
          <li>Submenu <i class='fa fa-caret-down'></i>

            <ul class='drop'>
              <li><a href="#">Gym</a></li>
              <li><a href="#">Clothes</a></li>
              <li><a href="#">Bar</a></li>
              <li>another submenu <i class='fa fa-caret-right'></i>

                <ul class='sub'>
                  <li><a href="#">School</a></li>
                  <li><a href="#">Hotdog</a></li>
                  <li><a href="#">Grapes</a></li>
                  <li><a href="#">Popcorn</a></li>								
                </ul>	
              </li>
            </ul>	
          </li>
        </nav>	

      </div>
      <br />
      <br />

      <h2>Buttons</h2>
      <h3>They invert the colors when you pass the mouse over</h3>

      <div class='box blue l3 c'>
        <div class='row yellow l4 c'>
          <a href="#" class='btn'>A Button</a>
          <a href="#" class='btn'>Another</a>
          <a href="#" class='btn yellow l4 black-t'>Grape</a>
        </div>				
      </div>

      <h2>Colors</h2>
      <div class='box'>
        <h3>Red</h3>
        <div class='row fat-v c'>
          <div class='col w4 red m10'>original</div>
          <div class='col w2 red l1 m5'>l1</div>
          <div class='col w2 red l2 m5'>l2</div>
          <div class='col w2 red l3 m5'>l3</div>
          <div class='col w2 red l4 m5'>l4</div>
          <div class='col w2 red l5 m5'>l5</div>
          <div class='col w2 red d1 white-t m5'>d1</div>
          <div class='col w2 red d2 white-t m5'>d2</div>
          <div class='col w2 red d3 white-t m5'>d3</div>
          <div class='col w2 red d4 white-t m5'>d4</div>
          <div class='col w2 red d5 white-t m5'>d5</div>
        </div>

        <h3>Green</h3>
        <div class='row fat-v c'>
          <div class='col w4 green m10'>original</div>
          <div class='col w2 green l1 m5'>l1</div>
          <div class='col w2 green l2 m5'>l2</div>
          <div class='col w2 green l3 m5'>l3</div>
          <div class='col w2 green l4 m5'>l4</div>
          <div class='col w2 green l5 m5'>l5</div>
          <div class='col w2 green d1 white-t m5'>d1</div>
          <div class='col w2 green d2 white-t m5'>d2</div>
          <div class='col w2 green d3 white-t m5'>d3</div>
          <div class='col w2 green d4 white-t m5'>d4</div>
          <div class='col w2 green d5 white-t m5'>d5</div>
        </div>

        <h3>Blue</h3>
        <div class='row fat-v c'>
          <div class='col w4 blue m10'>original</div>
          <div class='col w2 blue l1 m5'>l1</div>
          <div class='col w2 blue l2 m5'>l2</div>
          <div class='col w2 blue l3 m5'>l3</div>
          <div class='col w2 blue l4 m5'>l4</div>
          <div class='col w2 blue l5 m5'>l5</div>
          <div class='col w2 blue d1 white-t m5'>d1</div>
          <div class='col w2 blue d2 white-t m5'>d2</div>
          <div class='col w2 blue d3 white-t m5'>d3</div>
          <div class='col w2 blue d4 white-t m5'>d4</div>
          <div class='col w2 blue d5 white-t m5'>d5</div>
        </div>

        <h3>Yellow</h3>
        <div class='row fat-v c'>
          <div class='col w4 yellow m10'>original</div>
          <div class='col w2 yellow l1 m5'>l1</div>
          <div class='col w2 yellow l2 m5'>l2</div>
          <div class='col w2 yellow l3 m5'>l3</div>
          <div class='col w2 yellow l4 m5'>l4</div>
          <div class='col w2 yellow l5 m5'>l5</div>
          <div class='col w2 yellow d1 white-t m5'>d1</div>
          <div class='col w2 yellow d2 white-t m5'>d2</div>
          <div class='col w2 yellow d3 white-t m5'>d3</div>
          <div class='col w2 yellow d4 white-t m5'>d4</div>
          <div class='col w2 yellow d5 white-t m5'>d5</div>
        </div>

        <h3>Magenta</h3>
        <div class='row fat-v c'>
          <div class='col w4 magenta m10'> original</div>
          <div class='col w2 magenta l1 m5'>l1</div>
          <div class='col w2 magenta l2 m5'>l2</div>
          <div class='col w2 magenta l3 m5'>l3</div>
          <div class='col w2 magenta l4 m5'>l4</div>
          <div class='col w2 magenta l5 m5'>l5</div>
          <div class='col w2 magenta d1 white-t m5'>d1</div>
          <div class='col w2 magenta d2 white-t m5'>d2</div>
          <div class='col w2 magenta d3 white-t m5'>d3</div>
          <div class='col w2 magenta d4 white-t m5'>d4</div>
          <div class='col w2 magenta d5 white-t m5'>d5</div>
        </div>

        <h3>Cyan</h3>
        <div class='row fat-v c'>
          <div class='col w4 cyan m10'>original</div>
          <div class='col w2 cyan l1 m5'>l1</div>
          <div class='col w2 cyan l2 m5'>l2</div>
          <div class='col w2 cyan l3 m5'>l3</div>
          <div class='col w2 cyan l4 m5'>l4</div>
          <div class='col w2 cyan l5 m5'>l5</div>
          <div class='col w2 cyan d1 white-t m5'>d1</div>
          <div class='col w2 cyan d2 white-t m5'>d2</div>
          <div class='col w2 cyan d3 white-t m5'>d3</div>
          <div class='col w2 cyan d4 white-t m5'>d4</div>
          <div class='col w2 cyan d5 white-t m5'>d5</div>
        </div>

        <h3>White</h3>
        <div class='row fat-v c'>
          <div class='col w4 white b1 m10'>original</div>
          <div class='col w2 white l1 m5'>l1</div>
          <div class='col w2 white l2 m5'>l2</div>
          <div class='col w2 white l3 m5'>l3</div>
          <div class='col w2 white l4 m5'>l4</div>
          <div class='col w2 white l5 m5'>l5</div>
          <div class='col w2 white d1 white-t m5'>d1</div>
          <div class='col w2 white d2 white-t m5'>d2</div>
          <div class='col w2 white d3 white-t m5'>d3</div>
          <div class='col w2 white d4 white-t m5'>d4</div>
          <div class='col w2 white d5 white-t m5'>d5</div>
        </div>

      </div>

      <h2>Form</h2>
      <div class='box c blue l4 soft'>
        <form action="#">

          <div class='row'>
            <div class='col w10 o2 m10'>
              <label for='name'>Name</label>
              <input type='text' id='name' maxlength='10' />
            </div>

            <div class='col w10 o2 m10'>
              <label for='n'>Last name</label>
              <input type='text' id='last' maxlength='10' />
            </div>
          </div>

          <div class='row'>
            <div class='col w22 o2 m10'>
              <label for='email'>E-mail</label>
              <input type='text' id='email' maxlength='50' />
            </div>								
          </div>

          <div class='row'>
            <div class='col w10 o2 m10'>
              <label for='pass'>Password</label>
              <input type='password' id='pass' maxlength='10'/>
            </div>	
            <div class='col w10 o2 m10'>
              <label for='confirm'>Confirm Password</label>
              <input type='password' id='confirm' maxlength='10'/>
            </div>								
          </div>
          
          <div class='row'>
            <div class='col w22 o2 m10'>
              <label for='msg'>Message</label>
              <textarea id='msg'></textarea>
            </div>
          </div>  
          
          <div class='row c alone-v'><a href='#' class='btn fat-h'>Send</a></div>
            
        </form>

      </div>
    </div>			
  </body>
</html>
